<script setup lang="tsx">
import { ref } from 'vue';
import type { Ref } from 'vue';
import { NButton } from 'naive-ui';
// import { useBoolean } from '@sa/hooks';
import {
  fetchClearQueue,
  fetchGetQueueList,
  fetchPauseConsumer,
  fetchResumeConsumer
} from '@/service/api/system-manage';
import { useAppStore } from '@/store/modules/app';
import { useTable, useTableOperate } from '@/hooks/common/table';
// import { $t } from '@/locales';
// import ConsumerSearch from './modules/consumer-search.vue';
const appStore = useAppStore();

const { columns, columnChecks, data, loading, getData, mobilePagination } = useTable({
  apiFn: fetchGetQueueList,
  apiParams: {
    current: 1,
    size: 10
  },
  columns: () => [
    {
      type: 'selection',
      align: 'center',
      width: 48
    },
    {
      title: '队列名称',
      key: 'queueName',
      align: 'center',
      width: 140
    },
    {
      title: '队列类型',
      key: 'brokerKind',
      align: 'center',
      width: 120
    },
    {
      title: '最近10秒完成',
      key: 'lastTenSecondsNum',
      align: 'center',
      ellipsis: { tooltip: true },
      minWidth: 100
    },
    {
      title: '最近10秒失败',
      key: 'lastTenSecondsFailNum',
      align: 'center',
      ellipsis: { tooltip: true },
      minWidth: 100
    },
    {
      title: '最近10秒的平均耗时',
      key: 'lastTenSecondsTime',
      align: 'center',
      ellipsis: { tooltip: true },
      minWidth: 120
    },
    {
      title: '函数累计平均耗时',
      key: 'totalAvgTime',
      align: 'center',
      width: 150
    },
    {
      title: '消费者数量',
      key: 'consumerNum',
      align: 'center',
      ellipsis: { tooltip: true },
      minWidth: 100
    },
    {
      title: '是否暂停',
      key: 'pauseFlag',
      align: 'center',
      ellipsis: { tooltip: true },
      minWidth: 100,
      render: row => {
        // 当为1时表示暂停
        const isPause = row.pauseFlag === 1;
        return (
          <div class="flex-center">
            {isPause ? (
              <NButton type="warning" strong secondary size="small">
                暂停
              </NButton>
            ) : (
              <NButton type="success" strong secondary size="small">
                正常
              </NButton>
            )}
          </div>
        );
      }
    },
    {
      title: '操作',
      key: 'operate',
      align: 'center',
      fixed: 'right',
      width: 400,
      render: row => (
        <div class="flex-center justify-end gap-8px">
          <NButton type="info" strong secondary size="small">
            查看消费者配置
          </NButton>
          <NButton type="warning" strong secondary size="small" onClick={() => pauseConsumer(row.queueName)}>
            暂停消费
          </NButton>
          <NButton type="success" strong secondary size="small" onClick={() => resumeConsumer(row.queueName)}>
            恢复消费
          </NButton>
          <NButton type="error" strong secondary size="small" onClick={() => clearQueue(row)}>
            清空队列消息
          </NButton>
        </div>
      )
    }
  ]
});
const { checkedRowKeys } = useTableOperate(data, getData);
// 暂停消费
async function pauseConsumer(queue_name: string) {
  const { error } = await fetchPauseConsumer(queue_name);
  if (!error) {
    getData();
  }
}
// 恢复消费
async function resumeConsumer(queue_name: string) {
  const { error } = await fetchResumeConsumer(queue_name);
  if (!error) {
    getData();
  }
}
// 清空队列消息
async function clearQueue(row: Api.SystemManage.Queue) {
  const { error } = await fetchClearQueue(row.brokerKind, row.queueName);
  if (!error) {
    getData();
  }
}
</script>

<template>
  <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <!-- <ConsumerSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getDataByPage"></ConsumerSearch> -->
    <NCard title="消费者列表" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
      <template #header-extra>
        <TableHeaderOperation v-model:columns="columnChecks" :loading="loading" @refresh="getData">
          <template #prefix></template>
        </TableHeaderOperation>
      </template>
      <NDataTable
        v-model:checked-row-keys="checkedRowKeys"
        :columns="columns"
        :data="data"
        size="small"
        :flex-height="!appStore.isMobile"
        :scroll-x="750"
        :loading="loading"
        remote
        :row-key="row => row.queueName"
        :pagination="mobilePagination"
        class="sm:h-full"
      />
    </NCard>
  </div>
</template>
